<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>模块系统 - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1 id="idea" lay-toc="{title: '概要'}">模块系统</h1> 
<blockquote class="layui-elem-quote">
<p>Layui 制定了一套适合自身应用场景的轻量级模块规范，以便在不同规模的项目中，也能对前端代码进行很好的管理或维护。 Layui 的轻量级模块系统，并非有意违背 CommonJS 和 ES Module ，而是试图以更简单的方式去诠释高效，这种对<em class="layui-text-em">返璞归真</em>的执念源于在主流标准尚未完全普及的前 ES5 时代，后来也成为 Layui 独特的表达方式，而沿用至今。</p>
</blockquote class="layui-elem-quote">
<p>如下是一个关于模块的简单示例：</p>
<pre><code class="layui-code">// 定义模块（通常单独作为一个 JS 文件）
layui.define([mods], function(exports){
  // …
  
  exports('mod1', api); // 输出模块
});  
 
// 使用模块
layui.use(['mod1'], function(args){
  var mod1 = layui.mod1;
  
  // …
});
</code></pre>
<p>我们可以将其视为「像使用普通 API 一样来管理模块」，在此前提下，组件的承载也变得轻松自如，我们完全可以游刃在以浏览器为宿主的原生态的 HTML/CSS/JavaScript 的开发模式中，而不必卷入层出不穷的主流框架的浪潮之中，给心灵一个栖息之所。</p>
<p>当然，Layui 自然也不是一个模块加载器，而是一套相对完整的 UI 解决方案，但与 Bootstrap 又并不相同，除了 HTML+CSS 本身的静态化处理，Layui 的组件更倾向于 JavaScript 的动态化渲染，并为之提供了相对丰富和统一的 API，使用时，只需稍加熟悉，便可在各种交互中应付自如。</p>
<h2 id="define" lay-toc="">定义模块</h2>
<p><code>layui.define([mods], callback);</code></p>
<ul>
<li>参数 <code>mods</code> 可选，用于声明该模块所依赖的模块；</li>
<li>参数 <code>callback</code> 即为模块加载完毕的回调函数，它返回一个 <code>exports</code> 参数，用于输出该模块的接口。</li>
</ul>
<pre><code class="layui-code">/** demo.js **/
layui.define(function(exports){
  // do something
  
  // 输出 demo 模块
  exports('demo', {
    msg: 'Hello Demo'
  });
});
 
// 若该模块需要依赖别的模块，则在 `mods` 参数中声明即可：
// layui.define(['layer', 'form'], callback);
</code></pre>
<p>如上所示，<code>callback</code> 返回的 <code>exports</code> 参数是一个函数，它接受两个参数：参数一为<em class="layui-text-em">模块名</em>，参数二为<em class="layui-text-em">模块接口</em>。</p>
<p>另外， <code>callback</code> 将会在初次加载该模块时被自动执行。而有时，在某些特殊场景中可能需要再次执行该 <code>callback</code>，那么可以通过 <code>layui.factory(mod)</code> 方法获得。如：</p>
<pre><code class="layui-code">var demoCallback = layui.factory('demo'); // 得到定义 demo 模块时的 `callback`
</code></pre>
<ul>
<li><strong>模块命名空间</strong></li>
</ul>
<p>Layui 定义的模块将会被绑定在 <code>layui</code> 对象下，如：<code>var demo = layui.demo;</code> 每个模块都有一个特定命名，且无法被占用，所以你无需担心模块的命名空间被污染，除非通过 <code>layui.disuse([mods])</code> 方法弃用已定义的模块。</p>
<p>以下是定义一个「依赖 Layui 内置模块」的模块示例：</p>
<pre><code class="layui-code">layui.define(['layer', 'laydate'], function(exports){
  var layer = layui.layer // 获得 layer 模块
  var laydate = layui.laydate; // 获得 laydate 模块
  
  // 输出模块
  exports('demo', {}); // 模块名 demo 未被占用，此时模块定义成功
  // exports('layer', {}); // 模块名 layer 已经存在，此时模块定义失败
}); 
</code></pre>
<p>同样的，在「扩展模块」时，也同样不能命名已经存在的模块名。</p>
<h2 id="use" lay-toc="">使用模块</h2>
<p><code>layui.use([mods], callback);</code></p>
<ul>
<li>参数 <code>mods</code> 若填写，必须是已被成功定义的模块名；
<br>注<sup>2.6+</sup>：若 mods 不填，即只传一个 callback 参数时，则表示引用所有内置模块。</li>
<li>参数 <code>callback</code> 即为使用模块成功后回调函数。
<br>注<sup>2.6+</sup>：该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作。</li>
</ul>
<pre><code class="layui-code">// 使用指定模块
layui.use(['layer', 'table'], function(){
  var layer = layui.layer;
  var table = layui.table;
  
  // do something
});
 
// 使用所有内置模块（layui v2.6 开始支持）
layui.use(function(){
  var layer = layui.layer;
  var table = layui.table;
  var laydate = layui.laydate;
  // …
  
  // do something
});
</code></pre>
<p>你还可以通过 <code>callback</code> 返回的参数得到模块对象，如：</p>
<pre><code class="layui-code">layui.use(['layer', 'table'], function(layer, table){
  // 使用 layer
  layer.msg('test');
  
  // 使用 table
  table.render({});
});
</code></pre>
<ul>
<li><strong>执行「定义模块」时的回调函数</strong></li>
</ul>
<p>在上文的定义模块中，我们提到一个特殊场景，即重新获取定义模块时的 <code>callback</code> 函数, 譬如在<em class="layui-text-em">单页面应用</em>开发中，我们在视图碎片中使用某个模块，由于定义模块时的 <code>callback</code> 只会在模块初次加载中被调用，而当视图碎片在每次被渲染时，又往往需要该 <code>callback</code> 被再次执行，那么则可以通过以下方式实现：</p>
<pre><code class="layui-code">// 在单页面视图碎片渲染时，再次调用「定义模块」时的 `callback`
layui.use('demo', layui.factory('demo')); 
</code></pre>
<h2 id="extend" lay-toc="">扩展模块</h2>
<p><code>layui.extend(obj);</code></p>
<ul>
<li>参数 <code>obj</code> 是一个对象，必选，用于声明模块别名。</li>
</ul>
<p>除了 Layui 的内置模块，在实际项目开发时，必不可少也需要扩展模块（可以简单理解为符合 layui 模块规范的 JS 文件）。 现在，让我们尝试着扩展一个 Layui 第三方模块：</p>
<ol>
<li><strong>创建模块</strong></li>
</ol>
<p>我们在前文的「模块命名空间」提到，模块名具有唯一性，即不可被占用，因此我们扩展的模块必须是一个未被定义过的模块名。假设为：<code>firstMod</code>，然后新建一个 <code>firstMod.js</code> 文件并放入项目的任意目录中（最好不要放入到 Layui 原始目录）</p>
<ol start="2">
<li><strong>编写模块</strong></li>
</ol>
<p>接下来我们开始定义 <code>firstMod</code> 模块，并编写改模块主体代码。</p>
<pre><code class="layui-code">/**
 * 编写一个 firstMod 模块
 **/
layui.define(function(exports){ // 也可以依赖其他模块
  var obj = {
    hello: function(str){
      alert('Hello '+ (str || 'firstMod'));
    }
  };
  
  // 输出 firstMod 接口
  exports('firstMod', obj);
});
</code></pre>
<ol start="3">
<li><strong>声明模块</strong></li>
</ol>
<p>现在，我们只需声明模块名及模块文件路径，即完成模块扩展。</p>
<pre><code class="layui-code">// 假设 firstMod 模块文件所在路径在： /js/layui_exts/firstMod.js
layui.config({
  base: '/js/layui_exts/' // 配置 Layui 第三方扩展模块存放的基础目录
}).extend({
  firstMod: 'firstMod', // 定义模块名和模块文件路径，继承 layui.config 的 base 路径
  // mod2: 'mod2' // 可同时声明其他更多模块
});
 
// 也可以不继承  layui.config 的 base 路径，即单独指定路径
layui.extend({
  firstMod: '{/}/js/layui_exts/firstMod' // 开头特定符 {/} 即代表采用单独路径
});
 
// 然后我们就可以像使用内置模块一样使用扩展模块
layui.use(['firstMod'], function(){
  var firstMod = layui.firstMod;
  
  firstMod.hello('World');
});
</code></pre>
<blockquote class="layui-elem-quote">
<p>扩展模块是项目开发的重要环节，它既可以是工具性组件，也可以是纯业务组件，是 Layui 的延伸，也是项目的支撑。</p>
</blockquote class="layui-elem-quote">
<h2 id="index" lay-toc="">建立模块入口</h2>
<p>在不同的页面中，可能需要用到不同的业务模块。以首页为例：</p>
<pre><code class="layui-code">&lt;script src=&quot;/js/layui/layui.js&quot;&gt;&lt;/script&gt; 
&lt;script&gt;
layui.config({
  base: '/js/modules/' // 业务模块所在目录
}).use('index'); // 加载当前页面需要的业务模块
&lt;/script&gt;
</code></pre>
<p>上述的 <code>index</code> 模块即对应的模块文件 <code>/js/modules/index.js</code>，它同样也必须符合 Layui 模块规范。如：</p>
<pre><code class="layui-code">/**
 * index.js 首页业务模块
 */    
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer;
  var form = layui.form;
  
  layer.msg('Hello Index');
  
  exports('index', {}); // 输出模块名需和 use 和 extend 时的模块名一致
});
</code></pre>
<p><strong>合并模块入口</strong></p>
<p>当项目存在许多不同的业务模块（且存在一定的依赖关系），我们又希望在页面中建立统一的入口模块。如：</p>
<pre><code class="layui-code">// mod1.js
layui.define('layer', function(exports){
  // …
  exports('mod1', {});
});
 
// mod2.js，假设依赖 mod1 和 form
layui.define(['mod1', 'form'], function(exports){
  // …
  exports('mod2', {});
});  
 
// mod3.js
// … 
 
// index.js 主入口模块
layui.define('mod2', function(exports){
  // …
  exports('main', {});
});
</code></pre>
<p>我们可以将上述模块合并为一个文件来加载，即借助构建工具（如 Gulp）将上述的 <code>mod1、mod2、mod3、index</code> 等业务模块合并到一个模块文件：<code>index.js</code>，此时只需在页面统一加载该模块即可。这样我们最多只需要加载两个 JS 文件：<code>layui.js、index.js</code>，这将大幅度减少静态资源的请求。</p>
<br>
<h2>小贴士</h2>
<blockquote class="layui-elem-quote">
<p>综上： Layui 轻量级模块系统，无非就是：定义模块、使用模块、弃用模块、扩展模块的相互呼应，翻译成 API 即：</p>
<ul>
<li><code>layui.define();</code></li>
<li><code>layui.use();</code></li>
<li><code>layui.disuse();</code></li>
<li><code>layui.extend();</code></li>
</ul>
<hr>
<p>熟练运用，可让您的项目更利于维护。</p>
</blockquote class="layui-elem-quote">

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/modules.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>